<div class="order-service-config">
  <div ng-if="!$ctrl.error">
    <div ng-if="!$ctrl.orderComplete">
      <div class="results-status">
        <span class="fa fa-clock-o text-muted" aria-hidden="true"></span>
        <span class="sr-only">Pending</span>
        <div class="results-message">
          <h3>
            <strong>{{$ctrl.serviceClass.name}}</strong> is being provisioned in <strong>{{$ctrl.projectDisplayName}}</strong>.
          </h3>
          <p class="results-message-details">
            <span ng-if="$ctrl.binding">The binding will be created after the service has been provisioned.</span>
            This may take several minutes.
          </p>
        </div>
      </div>
      <p>
        <a ng-href="{{$ctrl.selectedProject | projectUrl : $ctrl.baseProjectUrl}}" ng-click="$ctrl.closePanel()">Continue to the project overview</a> to check the status of your service.
      </p>
    </div>
  </div>
  <div class="results-failure" ng-if="$ctrl.error">
    <div class="results-status">
      <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>
      <span class="sr-only">Error</span>
      <div class="results-message">
        <h3>
          <strong>{{$ctrl.serviceClass.name}}</strong> failed to provision in <strong>{{$ctrl.projectDisplayName}}</strong>.
        </h3>
      </div>
    </div>
    <div class="sub-title">
      <span ng-if="$ctrl.error.message" class="error-message">{{$ctrl.error.message}}</span>
      <span ng-if="!$ctrl.error.message" class="error-message">An error occurred provisioning the service.</span>
    </div>
  </div>
  <div ng-if="$ctrl.orderComplete">
    <div class="results-status">
      <span class="pficon pficon-ok" aria-hidden="true"></span>
      <span class="sr-only">Success</span>
      <div class="results-message">
        <h3>
          <strong>{{$ctrl.serviceClass.name}}</strong> has been added to <strong>{{$ctrl.projectDisplayName}}</strong> successfully.
        </h3>
      </div>
    </div>
  </div>
  <div ng-if="$ctrl.orderComplete && $ctrl.binding">
    <bind-results error="$ctrl.bindError"
                  binding="$ctrl.binding"
                  secret-href="$ctrl.selectedProject | secretUrl : $ctrl.baseProjectUrl : $ctrl.binding.spec.secretName"
                  service-to-bind="$ctrl.serviceInstance.metadata.name"
                  bind-type="{{$ctrl.bindType}}"
                  application-to-bind="$ctrl.appToBind.metadata.name"
                  show-pod-presets="$ctrl.showPodPresets">
    </bind-results>
    <p><a ng-href="{{$ctrl.selectedProject | projectUrl : $ctrl.baseProjectUrl}}">Continue to the project overview</a>.</p>
  </div>
  <div ng-if="$ctrl.orderComplete && $ctrl.bindType === 'none'">
    <p><a ng-href="{{$ctrl.selectedProject | projectUrl : $ctrl.baseProjectUrl}}">Continue to the project overview</a> to bind this service to your application. Binding this service creates a secret containing the information necessary for your application to use the service.</p>
  </div>
  <div ng-if="$ctrl.serviceClass.resource.externalMetadata.documentationUrl || $ctrl.serviceClass.resource.externalMetadata.supportUrl || (!$ctrl.error && $ctrl.serviceInstance.status.dashboardURL)">
    <p class="or" ng-if="!$ctrl.error">- or -</p>
    <p>Browse resources for {{$ctrl.serviceClass.name}}:</p>
    <ul class="list-inline">
      <li ng-if="$ctrl.serviceClass.resource.externalMetadata.documentationUrl">
        <a ng-href="{{$ctrl.serviceClass.resource.externalMetadata.documentationUrl}}" target="_blank">Documentation <i class="fa fa-external-link" aria-hidden="true"></i></a>
      </li>
      <li ng-if="$ctrl.serviceClass.resource.externalMetadata.supportUrl">
        <a ng-href="{{$ctrl.serviceClass.resource.externalMetadata.supportUrl}}" target="_blank">Support <i class="fa fa-external-link" aria-hidden="true"></i></a>
      </li>
      <li ng-if="!$ctrl.error && $ctrl.serviceInstance.status.dashboardURL">
        <a ng-href="{{$ctrl.serviceInstance.status.dashboardURL}}" target="_blank">Service Dashboard <i class="fa fa-external-link" aria-hidden="true"></i></a>
      </li>
    </ul>
  </div>
</div>
